<script setup>
import { ref } from "vue";
// 定义自身的收到的props
const props = defineProps({
  msg: String,
});
// 定义要触发的父组件方法
const emit = defineEmits(["getValue"]);
// input输入的内容 v-model绑定
const input = ref("");

const giveToFather = () => {
  // 触发父组件监听的方法
  emit("getValue", input.value);
};
</script>
<template>
  <h2>从父组件得到的值 - {{ props.msg }}</h2>
  <span class="tips">输入想要给父组件的data - </span>
  <input type="text" v-model="input" />
  <button @click="giveToFather">传给父组件</button>
</template>
<style scoped>
.tips {
  font-size: 18;
  font-weight: 600;
}
button {
  margin-left: 20px;
  height: 30px;
  width: 120px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}
</style>
